<#assign propsJson="${propsJson}"?eval />
<template>
  <div style="width: 100%; height:100%" ref="echarts"></div>
</template>

<script>
import * as echarts from "echarts";
export default {
   data() {
    return {
      <#assign map=modelJson[0] />
      <#assign keys=map?keys />
      xdata:[<#list modelJson as model>'${ model["${keys[0]}"] }'<#if model_has_next>,</#if></#list>],
      seriesdata:[
      <#list keys as key>
        <#if (key_index > 0)>
          {
            name:'${key}',
            data: [<#list modelJson as model>${ model["${key}"]?c }<#if model_has_next>,</#if></#list>],
            type: 'bar'
          }
          <#if key_has_next>,</#if>
        </#if>
      </#list>
      ],
      echarts:null
    };
  },
  methods: {
    echartsData() {
      const option = {
        color: [<#list propsJson.graphiccolor as graphiccolor>
          <#if graphiccolor?is_string>
          "${graphiccolor}"<#if graphiccolor_has_next>,</#if><#else><#assign colorkeys=graphiccolor?keys />
          {
          <#list colorkeys as key>
            <#if graphiccolor[key]?is_string>
            ${key}: "${graphiccolor[key]}"<#if key_has_next>,</#if>
            <#elseif graphiccolor[key]?is_number || graphiccolor[key]?is_boolean> 
            ${key}: ${graphiccolor[key]?string}<#if key_has_next>,</#if>
            <#else>
            ${key}: [<#list graphiccolor[key] as colorItem>
              {<#list colorItem?keys as ck>
                <#if colorItem[ck]?is_string>${ck}: "${colorItem[ck]}"<#else>${ck}: ${colorItem[ck]?string}</#if><#if ck_has_next>,</#if>
              </#list>}<#if colorItem_has_next>,</#if></#list>
            ]<#if key_has_next>,</#if>
            </#if>
          </#list>
          },
        </#if></#list>],
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          icon:'rect',
          itemWidth:10,
          itemHeight:10,
          show:true,
          left:'${propsJson.legendposition}',
          top:'${propsJson.legendlayout}',
          orient: '${propsJson.legendorient}', 
          textStyle: {
            color: '${propsJson.legendcolor}'
          }
        },
        grid:{
          left:'${'${propsJson.graphicleft}%'}',
          right:'${'${propsJson.graphicright}%'}',
          top:'${'${propsJson.graphictop}%'}',
          bottom:'${'${propsJson.graphicbottom}%'}',
        },
        xAxis: {
          data: this.xdata,
          axisLine: {
            show:${propsJson.Xhave?string("true","false")},
            lineStyle: {
              color: '${propsJson.Xcolor}'
            }
          },
          axisTick: {
            show: false
          },
          splitLine:{
            show:${propsJson.XhaveLine?string("true","false")},
            lineStyle: {    
              color: '${propsJson.Xlinecolor}'
            }
          },
        },
        yAxis: {
          axisLine: {
            show:${propsJson.Yhave?string("true","false")},
            lineStyle: {
              color: '${propsJson.Ycolor}'
            }
          },
          splitLine:{
            show:${propsJson.YhaveLine?string("true","false")},
            lineStyle: {
              color: '${propsJson.Ylinecolor}'
            }
          },
        },
        label: {
          show: ${propsJson.labelhave?string("true","false")},
          position: '${propsJson.labellayout}',
          color:'${propsJson.labelcolor}'
        },
        series: this.seriesdata
      };
      return option;
    },
    renderEcharts(){
        this.echarts = echarts.init(this.$refs.echarts)
        this.echarts.setOption(this.echartsData())
    },
  },
  mounted(){
    this.$nextTick(function(){
      this.renderEcharts()
    })
  }
};
</script>

<style>
</style>
